<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                            <!-- 分类名称 -->
                            <div class="form-group col-md-12">
                                <label for="name">分类名称</label>
                                <input type="text" class="form-control" id="name" name="name" value="{$Type['name']}"
                                    required placeholder="请输入分类名称" />
                                <div class="invalid-feedback">
                                    请输入分类名称
                                </div>
                            </div>
                            <!-- 权重 -->
                            <div class="form-group col-md-12">
                                <label for="weigh">权重</label>
                                <input type="text" class="form-control" id="weigh" name="weigh" value="{$Type['weigh']}"
                                    required placeholder="请输入权重" />
                                <div class="invalid-feedback">
                                    请输入分类权重
                                </div>
                            </div>
                            <!-- 封面图片 -->
                            <div class="form-group col-md-12">
                                <label for="cover">封面图片</label>
                                <input type="file" class="form-control" id="cover" name="cover"
                                    hidden />
                                <img class="img-thumbnail d-block" id="img" onclick="cover.click()"
                                    style="width: 200px;"
                                    src="{$Type['cover']?$Type['cover']:'/static/admin/images/upload.png'}">
                                <div class="invalid-feedback">
                                    请选择分类封面
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <button type="submit" class="btn btn-primary" target-form="add-form">确
                                    定</button>
                                <button type="button" class="btn btn-default"
                                    onclick="javascript:history.back(-1);return false;">返 回</button>
                            </div>
                        </form>
                        <script>
                            // Example starter JavaScript for disabling form submissions if there are invalid fields
                            (function () {
                                'use strict';
                                window.addEventListener('load', function () {
                                    // Fetch all the forms we want to apply custom Bootstrap validation styles to
                                    var forms = document.getElementsByClassName('needs-validation');
                                    // Loop over them and prevent submission
                                    var validation = Array.prototype.filter.call(forms, function (form) {
                                        form.addEventListener('submit', function (event) {
                                            if (form.checkValidity() === false) {
                                                event.preventDefault();
                                                event.stopPropagation();
                                            }
                                            form.classList.add('was-validated');
                                        }, false);
                                    });
                                }, false);
                            })();
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!--End 页面主要内容-->

<script>
    $(function () {
        $('#cover').change(function () {
            let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}

            let url = GetObjectURL(file)

            $('#img').attr('src', url)
        })
    })
    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;
        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
    }
</script>